<template>
    <div style="width: 95%;margin: auto;">
        <el-button type="primary" @click="showDialog()" :icon="Plus"> 一级菜单</el-button>
    </div>

    <el-table :data="menuObj.menus" style="width: 100%; margin: 10px,auto;" row-key="mid" border
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
        <el-table-column prop="mid" label="菜单编号" wdith="120px" fixed />
        <el-table-column prop="mname" label="菜单名称" wdith="150px" />
        <el-table-column prop="route" label="路由地址" wdith="180px" />
        <el-table-column prop="icon" label="图标" wdith="120px">
            <template #default="scope">
                <el-icon>
                    <component :is="scope.row.icon" />
                </el-icon>
            </template>
        </el-table-column>
        <el-table-column prop="createtime" label="创建时间" wdith="150px" />
        <el-table-column prop="updatetime" label="修改时间" wdith="150px" fixed="right" />
        <el-table-column label="操作" fixed="right" wdith="300px">
            <template #default="scope">

                <el-button v-if="scope.row.pid == 0" type="primary" :icon="Plus" circle
                    @click="addChildMenu(scope.row)" />
                <el-button type="danger" :icon="Delete" circle @click="handleDelete(scope.row)" />
                <el-button type="primary" :icon="Edit" circle @click="handleEdit(scope.$index, scope.row)" />

            </template>
        </el-table-column>
    </el-table>

    <!-- 添加 和 修改 菜单dialog -->
    <el-dialog title="菜单信息" v-model="dialogObj.dialogFormVisible" width="35%" draggable>
        <el-form :model="menuObj.menu" class="demo-form-inline" label-width="80px">
            <el-form-item label="名称">
                <el-input v-model="menuObj.menu.mname" placeholder="名称" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="路由">
                <el-input v-model="menuObj.menu.route" placeholder="路由地址" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item label="显示图片">
                <el-input v-model="menuObj.menu.icon" placeholder="图标" style="width: 200px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm()" v-text="dialogObj.formBtn"></el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
</template>
<script setup lang="ts">
import request from '@/utils/request';
import { ref, reactive, onMounted } from 'vue';
import { ElMessage } from 'element-plus'
import { Plus, Delete, Edit, Location, } from '@element-plus/icons-vue'



/**声明menu类型*/
interface Menu {
    mid: number,
    pid: number,
    mname: string,
    route: string,
    icon: string,
    createtime: Date
    updatetime: Date,
    children: Menu[]
}

//定义变量接收menu数据
let menuObj = reactive({
    menus: [] as Menu[],
    menu: {} as Menu,
})
// 定义对话框对象
const dialogObj = reactive({
    dialogFormVisible: false,
    formBtn: ''
})
/**
 * 
 * 根据mid删除菜单
 */
const handleDelete = async (row: any) => {
    let res = await request.delete(`/menu/deleteById/${row.mid}`, { params: row });
    if (res.data.success) {
        ElMessage.success("删除成功");
        //调用查询方法
        findMenuById(0);
    }

}


const showDialog = () => {
    dialogObj.dialogFormVisible = true;
    dialogObj.formBtn = "添加";
}

//显示修改对话框函数
const handleEdit = (index, row) => {
    menuObj.menu = row;
    console.log(row);

    dialogObj.formBtn = "修改";
    dialogObj.dialogFormVisible = true;
}

//新增或者修改菜单
const submitForm = async () => {
    //判断当前操作是新增或是修改
    if (dialogObj.formBtn == '添加') {
        //调用后端接口
        let res = await request.post("/menu/addMenu", menuObj.menu)
        if (res.data.success) {
            ElMessage.success("添加成功");
            //调用查询方法
            findMenuById(0);
            //关闭对话框
            dialogObj.dialogFormVisible = false;
        } else {
            ElMessage.error("新增失败!");
        }
    } else { //表示修改操作
        //调用后端接口
        let res = await request.put("/menu/updateMenu", menuObj.menu)
        if (res.data.success) {
            ElMessage.success("修改成功");
            //调用查询方法
            findMenuById(0);
            //关闭对话框
            dialogObj.dialogFormVisible = false;
        }
    }
    //清空表单
    clearForm();
}

//显示对话框
const addChildMenu = (row: any) => {
    //设置pid
    menuObj.menu.pid = row.mid;
    dialogObj.formBtn = "添加";
    //显示对话框
    dialogObj.dialogFormVisible = true;
}
//重置表单函数
const resetForm = () => {
    clearForm();
}
//清空表单函数
const clearForm = () => {
    menuObj.menu.mname = "";
    menuObj.menu.route = "";
    menuObj.menu.icon = "";
}
//查询
const findMenuById = async (menuId: number) => {
    //发送请求获取数据
    let res = await request.get("/menu/menus");
    if (res.data.success) {
        menuObj.menus = res.data.data;
    }
}
onMounted(() => {
    //查询菜单信息
    findMenuById(0)
})
</script>
<style scoped></style>